<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 直接指定contentEditable="true" 表明该元素是可以编辑的-->
<div contenteditable="true" style="width:500px;border:1px solid black">
    疯狂Java讲义
    <!-- 该元素的父元素有contentEditable="true",因此该表格也是可以编辑的-->
    <table style="width: 420px;border-collapse: collapse;" border="1">
        <tr>
            <td>疯狂Java讲义</td>
            <td>疯狂Android将以 </td>
        </tr>
        <tr>
            <td>疯狂Java讲义2</td>
            <td>疯狂Android将以2 </td>
        </tr>
    </table>
</div>
<hr/>
<!-- 这个表格默认是不可以编辑的,双击后可以编辑 -->
<table id="target" ondblclick="this.contentEditable=true"
       style="width: 420px;border-collapse: collapse;" border="1">
    <tr>
        <td>疯狂Java讲义</td>
        <td>疯狂Android将以 </td>
    </tr>
    <tr>
        <td>疯狂Java讲义2</td>
        <td>疯狂Android将以2 </td>
    </tr>
</table>
</body>
</html>